<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>3D 警车模型</title>
    <style>
      .cuboid {
        width: 100%;
        height: 100%;
        position: relative;
      }
      .cuboid__side:nth-of-type(1) {
        height: calc(var(--thickness) * 1vmin);
        width: 100%;
        position: absolute;
        top: 0;
        transform: translate(0, -50%) rotateX(90deg);
      }
      .cuboid__side:nth-of-type(2) {
        height: 100%;
        width: calc(var(--thickness) * 1vmin);
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(50%, -50%) rotateY(90deg);
      }
      .cuboid__side:nth-of-type(3) {
        width: 100%;
        height: calc(var(--thickness) * 1vmin);
        position: absolute;
        bottom: 0;
        transform: translate(0%, 50%) rotateX(90deg);
      }
      .cuboid__side:nth-of-type(4) {
        height: 100%;
        width: calc(var(--thickness) * 1vmin);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(-50%, -50%) rotateY(90deg);
      }
      .cuboid__side:nth-of-type(5) {
        height: 100%;
        width: 100%;
        transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
        position: absolute;
        top: 0;
        left: 0;
      }
      .cuboid__side:nth-of-type(6) {
        height: 100%;
        width: 100%;
        transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin))
          rotateY(180deg);
        position: absolute;
        top: 0;
        left: 0;
      }
      *,
      *:after,
      *:before {
        box-sizing: border-box;
        transform-style: preserve-3d;
        transition: background 0.1s ease;
      }
      body {
        min-height: 100vh;
        display: grid;
        background: var(--bg);
        place-items: center;
        touch-action: none;
      }
      :root {
        --base-size: 1vmin;
        --base-height: calc(45 * 0.65);
        --base-width: calc(75 * 0.65);
        --speed: 0.4s;
        --bg: hsl(210, 80%, calc((15 + (var(--on, 0) * 75)) * 1%));
        --width: calc(var(--base-width) * var(--base-size));
        --height: calc(var(--base-height) * var(--base-size));
        --road-one: hsl(0, 0%, calc((40 + (var(--on, 0) * 35)) * 1%));
        --road-two: hsl(0, 0%, calc((30 + (var(--on, 0) * 35)) * 1%));
        --road-three: hsl(0, 0%, calc((20 + (var(--on, 0) * 35)) * 1%));
        --road-four: hsl(0, 0%, calc((10 + (var(--on, 0) * 35)) * 1%));
        --road-marking-one: hsl(0, 0%, calc((85 + (var(--on, 0) * 15)) * 1%));
        --road-marking-two: hsl(0, 0%, calc((80 + (var(--on, 0) * 15)) * 1%));
        --road-marking-three: hsl(0, 0%, calc((75 + (var(--on, 0) * 15)) * 1%));
        --white-one: hsl(0, 0%, calc((85 + (var(--on, 0) * 10)) * 1%));
        --white-two: hsl(0, 0%, calc((80 + (var(--on, 0) * 10)) * 1%));
        --white-three: hsl(0, 0%, calc((75 + (var(--on, 0) * 10)) * 1%));
        --white-four: hsl(0, 0%, calc((70 + (var(--on, 0) * 10)) * 1%));
        --glass-one: hsl(210, 80%, calc((85 + (var(--on, 0) * 10)) * 1%));
        --glass-two: hsl(210, 80%, calc((80 + (var(--on, 0) * 10)) * 1%));
        --glass-three: hsl(210, 80%, calc((75 + (var(--on, 0) * 10)) * 1%));
        --glass-four: hsl(210, 80%, calc((70 + (var(--on, 0) * 10)) * 1%));
        --bumper-one: hsl(0, 0%, calc((80 + (var(--on, 0) * 10)) * 1%));
        --bumper-two: hsl(0, 0%, calc((75 + (var(--on, 0) * 10)) * 1%));
        --bumper-three: hsl(0, 0%, calc((70 + (var(--on, 0) * 10)) * 1%));
        --bumper-four: hsl(0, 0%, calc((65 + (var(--on, 0) * 10)) * 1%));
        --wheel-one: hsl(0, 0%, calc((15 + (var(--on, 0) * 10)) * 1%));
        --wheel-two: hsl(0, 0%, calc((10 + (var(--on, 0) * 10)) * 1%));
        --wheel-three: hsl(0, 0%, calc((5 + (var(--on, 0) * 10)) * 1%));
        --wheel-four: hsl(0, 0%, calc((0 + (var(--on, 0) * 10)) * 1%));
        --white-four: hsl(0, 0%, calc((70 + (var(--on, 0) * 10)) * 1%));
        --black-one: hsl(0, 0%, calc((20 + (var(--on, 0) * 10)) * 1%));
        --black-two: hsl(0, 0%, calc((15 + (var(--on, 0) * 10)) * 1%));
        --black-three: hsl(0, 0%, calc((10 + (var(--on, 0) * 10)) * 1%));
        --black-four: hsl(0, 0%, calc((5 + (var(--on, 0) * 10)) * 1%));
        --hub: hsl(0, 0%, calc((65 + (var(--on, 0) * 25)) * 1%));
        --glare: rgba(255, 255, 255, 0.25);
        --siren-red: rgba(242, 32, 13, 0.25);
        --siren-blue: rgba(13, 147, 242, 0.25);
        --lamp: hsl(45, 90%, 90%, calc(0.75 - calc(var(--on, 0) * 0.75)));
        --headlight: hsl(45, 90%, 100%, calc(1 - calc(var(--on, 0) * 0.5)));
        --indicator: hsl(35, 90%, 50%, calc(1 - calc(var(--on, 0) * 0.5)));
        --taillight: hsl(0, 90%, 50%, calc(1 - calc(var(--on, 0) * 0.5)));
        --shift: calc(var(--height) * 0.1);
        --bob: calc(var(--width) * 0.08);
        --bob-speed: 2s;
        --shift-speed: 5s;
      }
      .scene {
        position: fixed;
        height: var(--height);
        width: var(--width);
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 100vmin);
        transform: translate3d(-50%, -65%, 100vmin) rotateX(-24deg)
          rotateY(44deg) rotateX(calc(var(--rotate-x, 0) * 1deg))
          rotateY(calc(var(--rotate-y, 0) * 1deg));
      }
      .road {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 20%;
        transform: translate3d(0, 1px, 0);
      }
      .car {
        position: absolute;
        height: 100%;
        width: 100%;
        -webkit-animation: bob var(--bob-speed) infinite linear alternate;
        animation: bob var(--bob-speed) infinite linear alternate;
      }
      .car__bob {
        position: absolute;
        left: 50%;
        bottom: 20%;
        height: 50%;
        width: 50%;
        transform: translate3d(-50%, 0%, 0vmin);
        -webkit-animation: shift var(--shift-speed) infinite linear alternate;
        animation: shift var(--shift-speed) infinite linear alternate;
      }
      @-webkit-keyframes shift {
        0% {
          transform: translate3d(-50%, 0%, calc(var(--shift) * -1));
        }
        100% {
          transform: translate3d(-50%, 0%, calc(var(--shift) * 1));
        }
      }
      @keyframes shift {
        0% {
          transform: translate3d(-50%, 0%, calc(var(--shift) * -1));
        }
        100% {
          transform: translate3d(-50%, 0%, calc(var(--shift) * 1));
        }
      }
      .car > * {
        position: absolute;
      }
      .car__shadow {
        width: 100%;
        height: calc(var(--height) * 0.4);
        background: rgba(0, 0, 0, 0.5);
        bottom: 0;
        transform: translate(0, 50%) rotateX(90deg) translate3d(0, 0, 1px)
          scale(1.05, 1.1);
      }
      .car__headlights {
        width: 25%;
        height: calc(var(--height) * 0.5);
        bottom: 0%;
        left: 0;
        transform: translate(-125%, 50%) rotateX(90deg) translate3d(0, 0, 1px);
        position: relative;
      }
      .car__headlights:after,
      .car__headlights:before {
        content: "";
        position: absolute;
        height: 50%;
        width: 100%;
        background: var(--lamp);
        border-radius: 50%;
        filter: blur(10px);
      }
      .car__headlights:after {
        top: 0;
      }
      .car__headlights:before {
        bottom: 0;
      }
      .car__wheel {
        height: calc(var(--height) * 0.13);
        width: calc(var(--height) * 0.13);
        bottom: 0;
      }
      .car__wheel--f {
        left: 10%;
      }
      .car__wheel--r {
        right: 10%;
      }
      .car__wheel--osf,
      .car__wheel--osr {
        transform: translate3d(0, 0, calc(var(--height) * 0.2));
      }
      .car__wheel--nsf,
      .car__wheel--nsr {
        transform: translate3d(0, 0, calc(var(--height) * -0.2));
      }
      .car__body--bottom {
        bottom: 5%;
        width: 100%;
        height: 40%;
      }
      .car__body--top {
        bottom: 44.5%;
        width: 60%;
        height: 40%;
        left: 22%;
      }
      .car__siren {
        bottom: 85%;
        height: calc(var(--height) * 0.0725);
        width: calc(var(--height) * 0.0725);
        left: 50%;
      }
      .car__siren > * {
        position: absolute;
        top: 0;
        left: 0;
      }
      .car__mirrors {
        width: 5%;
        height: 13%;
        left: 24%;
        bottom: 40%;
      }
      .car__mirror {
        height: 100%;
        position: absolute;
        width: 100%;
      }
      .car__mirror--left {
        transform: translate3d(0, 0, calc((var(--height) * 0.2325) + 2px));
      }
      .car__mirror--right {
        transform: translate3d(0, 0, calc((var(--height) * -0.2325) - 2px));
      }
      .car__bumper {
        height: calc(var(--height) * 0.05);
        width: calc(var(--height) * 0.05);
        bottom: 4%;
      }
      .car__bumper--front {
        left: 0;
        transform: translate(-40%, 0);
      }
      .car__bumper--rear {
        right: 0;
        transform: translate(40%, 0);
      }
      @-webkit-keyframes bob {
        0% {
          transform: translate(calc(var(--bob) * -0.5));
        }
        100% {
          transform: translate(calc(var(--bob) * 1.5));
        }
      }
      @keyframes bob {
        0% {
          transform: translate(calc(var(--bob) * -0.5));
        }
        100% {
          transform: translate(calc(var(--bob) * 1.5));
        }
      }
      .body {
        --thickness: calc(var(--base-height) * 0.4);
      }
      .body--top div {
        background: var(--white-two);
      }
      .body--top div:nth-of-type(1) {
        background: linear-gradient(
          90deg,
          transparent 0 20%,
          var(--white-one) 20% 80%,
          transparent 80% 100%
        );
      }
      .body--top div:nth-of-type(2) {
        background: transparent;
      }
      .body--top div:nth-of-type(2):after {
        content: "";
        position: absolute;
        width: 100%;
        height: 112%;
        background: var(--white-two);
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0) rotateX(27deg);
        transform-origin: 50% 100%;
      }
      .body--top div:nth-of-type(2):before {
        content: "";
        position: absolute;
        width: 100%;
        height: 112%;
        background: linear-gradient(
            55deg,
            transparent 0 30%,
            var(--glare) 30% 40%,
            transparent 40% 45%,
            var(--glare) 45% 50%,
            transparent 50% 100%
          ),
          var(--glass-two);
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0) rotateX(27deg) translate3d(0, 0, 1px);
        transform-origin: 50% 100%;
        --clip: inset(10% 10% 10% 10%);
        -webkit-clip-path: var(--clip);
        clip-path: var(--clip);
      }
      .body--top div:nth-of-type(3) {
        background: var(--white-four);
      }
      .body--top div:nth-of-type(4) {
        background-color: transparent;
      }
      .body--top div:nth-of-type(4):after {
        content: "";
        position: absolute;
        width: 100%;
        height: 112%;
        background: var(--white-two);
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0) rotateX(-27deg);
        transform-origin: 50% 100%;
      }
      .body--top div:nth-of-type(4):before {
        content: "";
        position: absolute;
        width: 100%;
        height: 112%;
        background: linear-gradient(
            55deg,
            transparent 0 30%,
            var(--glare) 30% 40%,
            transparent 40% 45%,
            var(--glare) 45% 50%,
            transparent 50% 100%
          ),
          var(--glass-two);
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0) rotateX(-27deg) translate3d(0, 0, -1px);
        transform-origin: 50% 100%;
        --clip: inset(10% 10% 10% 10%);
        -webkit-clip-path: var(--clip);
        clip-path: var(--clip);
      }
      .body--top div:nth-of-type(5) {
        background: var(--white-three);
        --clip: polygon(0 100%, 20% 0, 80% 0, 100% 100%);
        -webkit-clip-path: var(--clip);
        clip-path: var(--clip);
      }
      .body--top div:nth-of-type(5):after {
        content: "";
        background: linear-gradient(var(--white-three), var(--white-three)) 65%
          50%/8% 100% no-repeat;
        background-color: var(--glass-three);
        position: absolute;
        height: 90%;
        width: 90%;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        --clip: polygon(0 100%, 20% 0, 80% 0, 100% 100%);
        -webkit-clip-path: var(--clip);
        clip-path: var(--clip);
      }
      .body--top div:nth-of-type(6) {
        background: var(--white-four);
        --clip: polygon(0 100%, 20% 0, 80% 0, 100% 100%);
        -webkit-clip-path: var(--clip);
        clip-path: var(--clip);
      }
      .body--top div:nth-of-type(6):after {
        content: "";
        background: linear-gradient(var(--white-four), var(--white-four)) 35%
          50%/8% 100% no-repeat;
        background-color: var(--glass-four);
        position: absolute;
        height: 90%;
        width: 90%;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        --clip: polygon(0 100%, 20% 0, 80% 0, 100% 100%);
        -webkit-clip-path: var(--clip);
        clip-path: var(--clip);
      }
      .body--bottom div {
        background: var(--black-two);
      }
      .body--bottom div:nth-of-type(1) {
        background: linear-gradient(
          90deg,
          var(--black-one) 0 22%,
          var(--white-one) 22% 82%,
          var(--black-one) 82% 100%
        );
        background-color: var(--black-one);
      }
      .body--bottom div:nth-of-type(1):after {
        content: "";
        background: var(--black-one);
        position: absolute;
        top: 50%;
        left: 50%;
        height: 99%;
        width: 101%;
        transform: translate3d(-50%, -50%, -1px);
      }
      .body--bottom div:nth-of-type(1):before {
        content: "382";
        font-family: sans-serif;
        font-weight: bold;
        height: 30%;
        width: 40%;
        text-align: center;
        overflow: hidden;
        position: absolute;
        font-size: calc(var(--height) * 0.1);
        color: var(--white-one);
        right: 0;
        bottom: 50%;
        transform: translate3d(50%, 50%, 2px) rotate(-90deg) translate(0, -50%);
      }
      .body--bottom div:nth-of-type(2) {
        background: linear-gradient(var(--indicator), var(--indicator)) 95% 50%/5%
            25% no-repeat,
          linear-gradient(var(--indicator), var(--indicator)) 5% 50%/5% 25%
            no-repeat,
          linear-gradient(var(--taillight), var(--taillight)) 10% 50%/15% 25%
            no-repeat,
          linear-gradient(var(--taillight), var(--taillight)) 90% 50%/15% 25%
            no-repeat;
        background-color: var(--black-two);
      }
      .body--bottom div:nth-of-type(3) {
        background-color: var(--black-four);
      }
      .body--bottom div:nth-of-type(4) {
        background: repeating-linear-gradient(
              transparent 0 20%,
              var(--black-four) 20% 40%
            )
            50% 50%/25% 25% no-repeat,
          linear-gradient(var(--bumper-one), var(--bumper-one)) 50% 50%/35% 25%
            no-repeat,
          linear-gradient(var(--indicator), var(--indicator)) 95% 50%/5% 25%
            no-repeat,
          linear-gradient(var(--indicator), var(--indicator)) 5% 50%/5% 25%
            no-repeat,
          linear-gradient(var(--headlight), var(--headlight)) 10% 50%/15% 25%
            no-repeat,
          linear-gradient(var(--headlight), var(--headlight)) 90% 50%/15% 25%
            no-repeat;
        background-color: var(--black-two);
      }
      .body--bottom div:nth-of-type(5) {
        background: linear-gradient(
          90deg,
          var(--black-three) 0 22%,
          var(--white-three) 22% 82%,
          var(--black-three) 82% 100%
        );
        background-color: var(--black-three);
      }
      .body--bottom div:nth-of-type(5):after {
        content: "";
        height: 75%;
        width: 35%;
        background: url("https://assets.codepen.io/605876/bear--gold-badge--large.png");
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        left: 35%;
        top: 50%;
        transform: translate(0, -50%);
      }
      .body--bottom div:nth-of-type(6) {
        background: linear-gradient(
          90deg,
          var(--black-four) 0 18%,
          var(--white-four) 18% 78%,
          var(--black-four) 78% 100%
        );
        background-color: var(--black-four);
      }
      .body--bottom div:nth-of-type(6):after {
        content: "";
        height: 75%;
        width: 35%;
        background: url("https://assets.codepen.io/605876/bear--gold-badge--large.png");
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        left: 45%;
        top: 50%;
        transform: translate(0, -50%);
      }
      .scene__road {
        --thickness: calc(var(--base-height));
      }
      .scene__road > div:nth-of-type(1) {
        background-color: var(--road-one);
      }
      .scene__road > div:nth-of-type(2) {
        background: var(--road-two);
      }
      .scene__road > div:nth-of-type(3) {
        background: var(--road-four);
      }
      .scene__road > div:nth-of-type(4) {
        background-color: var(--road-two);
      }
      .scene__road > div:nth-of-type(5) {
        background: var(--road-three);
      }
      .scene__road > div:nth-of-type(6) {
        background: var(--road-four);
      }
      .siren--red {
        --thickness: calc(var(--base-height) * 0.1);
        --alpha: 0.25;
        transform: translate3d(0, 0, calc(var(--height) * -0.075));
        --siren-red: hsla(5, 90%, 50%, var(--alpha));
        -webkit-animation: flash var(--siren) infinite;
        animation: flash var(--siren) infinite;
      }
      .siren--red div {
        background: var(--siren-red);
      }
      .siren--blue {
        --alpha: 0.25;
        --thickness: calc(var(--base-height) * 0.1);
        --siren-blue: hsla(210, 90%, 50%, var(--alpha));
        transform: translate3d(0, 0, calc(var(--height) * 0.075));
        animation: flash var(--siren) infinite reverse;
      }
      .siren--blue div {
        background: var(--siren-blue);
      }
      .siren--middle {
        --thickness: calc(var(--base-height) * 0.05);
        transform: translate3d(0, 0, 0);
      }
      .siren--middle div {
        background: var(--white-one);
      }
      .siren--middle div:nth-of-type(1) {
        background: var(--white-one);
      }
      .siren--middle div:nth-of-type(2) {
        background: var(--white-two);
      }
      .siren--middle div:nth-of-type(3) {
        background: var(--white-three);
      }
      .siren--middle div:nth-of-type(4),
      .siren--middle div:nth-of-type(5) {
        background: var(--white-four);
      }
      .siren--middle div:nth-of-type(6) {
        background: var(--white-three);
      }
      .wheel {
        --thickness: calc(var(--base-height) * 0.05);
      }
      .wheel div {
        background: var(--wheel-four);
      }
      .wheel div:nth-of-type(1) {
        background: var(--wheel-one);
      }
      .wheel div:nth-of-type(2) {
        background: var(--wheel-two);
      }
      .wheel div:nth-of-type(3) {
        background: var(--wheel-three);
      }
      .wheel div:nth-of-type(4) {
        background: var(--wheel-four);
      }
      .wheel div:nth-of-type(5) {
        background: linear-gradient(var(--hub), var(--hub)) 50% 50%/35% 35%
          no-repeat;
        background-color: var(--wheel-four);
      }
      .wheel div:nth-of-type(6) {
        background: linear-gradient(var(--hub), var(--hub)) 50% 50%/35% 35%
          no-repeat;
        background-color: var(--wheel-three);
      }
      .bumper {
        --thickness: calc(var(--base-height) * 0.45);
      }
      .bumper div {
        background: var(--bumper-one);
      }
      .bumper div:nth-of-type(1) {
        background: var(--bumper-one);
      }
      .bumper div:nth-of-type(2) {
        background: var(--bumper-two);
      }
      .bumper div:nth-of-type(3) {
        background: var(--bumper-three);
      }
      .bumper div:nth-of-type(4),
      .bumper div:nth-of-type(5) {
        background: var(--bumper-four);
      }
      .bumper div:nth-of-type(6) {
        background: var(--bumper-three);
      }
      .mirror {
        --thickness: calc(var(--base-height) * 0.075);
      }
      .mirror div {
        background: var(--black-two);
      }
      .mirror div:nth-of-type(1) {
        background-color: var(--black-one);
      }
      .mirror div:nth-of-type(2) {
        background: linear-gradient(var(--white-one), var(--white-one)) 50% 50%/75%
          75% no-repeat;
        background-color: var(--black-two);
      }
      .mirror div:nth-of-type(3) {
        background: var(--black-four);
      }
      .mirror div:nth-of-type(4) {
        background-color: var(--black-two);
      }
      .mirror div:nth-of-type(5) {
        background: var(--black-three);
      }
      .mirror div:nth-of-type(6) {
        background: var(--black-four);
      }
      .road__markings {
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
      .road__markings--bottom {
        transform: translate3d(0, 0, -1px);
      }
      .road__markings--bottom:after {
        content: "";
        position: absolute;
        height: 100%;
        width: calc(var(--width) * 2);
        background: repeating-linear-gradient(
            270deg,
            var(--road-marking-three) 0 10%,
            transparent 10% 15%
          )
          0 50%/100% 5% no-repeat;
        bottom: 0;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        -webkit-animation: roll-bottom var(--speed) infinite linear;
        animation: roll-bottom var(--speed) infinite linear;
      }
      .road__markings--front {
        transform: translate3d(0, 0, -1px);
      }
      .road__markings--front:after {
        content: "";
        position: absolute;
        height: calc(var(--base-height) * 1vmin);
        width: calc(var(--width) * 2);
        background: repeating-linear-gradient(
            270deg,
            var(--road-marking-two) 0 10%,
            transparent 10% 15%
          )
          0 50%/100% 5% no-repeat;
        top: 0%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-90deg)
          translate3d(-35%, 0, -1px);
        -webkit-animation: roll-front var(--speed) infinite linear;
        animation: roll-front var(--speed) infinite linear;
      }
      @-webkit-keyframes roll-front {
        to {
          transform: translate(-50%, -50%) rotate(-90deg)
            translate3d(-20%, 0, -1px);
        }
      }
      @keyframes roll-front {
        to {
          transform: translate(-50%, -50%) rotate(-90deg)
            translate3d(-20%, 0, -1px);
        }
      }
      .road__markings--back {
        transform: translate3d(0, 0, 1px);
      }
      .road__markings--back:after {
        content: "";
        position: absolute;
        height: calc(var(--base-height) * 1vmin);
        width: calc(var(--width) * 2);
        background: repeating-linear-gradient(
            270deg,
            var(--road-marking-two) 0 10%,
            transparent 10% 15%
          )
          0 50%/100% 5% no-repeat;
        top: 0%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-90deg)
          translate3d(-35%, 0, 1px);
        -webkit-animation: roll-back var(--speed) infinite linear;
        animation: roll-back var(--speed) infinite linear;
      }
      @-webkit-keyframes roll-back {
        to {
          transform: translate(-50%, -50%) rotate(-90deg)
            translate3d(-50%, 0, 1px);
        }
      }
      @keyframes roll-back {
        to {
          transform: translate(-50%, -50%) rotate(-90deg)
            translate3d(-50%, 0, 1px);
        }
      }
      .road__markings--top {
        transform: translate3d(0, 0, 1px);
      }
      .road__markings--top:after {
        content: "";
        position: absolute;
        height: 100%;
        width: calc(var(--width) * 2);
        background: repeating-linear-gradient(
            270deg,
            var(--road-marking-one) 0 10%,
            transparent 10% 15%
          )
          0 50%/100% 5% no-repeat;
        bottom: 0;
        left: 50%;
        transform: translate3d(-50%, 0, 1px);
        -webkit-animation: roll-top var(--speed) infinite linear;
        animation: roll-top var(--speed) infinite linear;
      }
      @-webkit-keyframes roll-top {
        to {
          transform: translate3d(-35%, 0, 1px);
        }
      }
      @keyframes roll-top {
        to {
          transform: translate3d(-35%, 0, 1px);
        }
      }
      .controls {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        display: flex;
        flex-direction: column;
      }
      .controls > * + * {
        margin-top: 1rem;
      }
      button {
        height: 48px;
        width: 48px;
        cursor: pointer;
        transform: translate3d(0, 0, 150vmin);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 0;
        background: transparent;
        outline: transparent;
      }
      button > svg {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
      }
      button path {
        fill: hsl(210, 80%, calc((90 - (var(--on, 0) * 75)) * 1%));
      }
      button svg:nth-of-type(1),
      button span:nth-of-type(1) {
        display: none;
      }
      button span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
      }
      [aria-pressed="true"] svg:nth-of-type(1),
      [aria-pressed="true"] span:nth-of-type(1) {
        display: block;
      }
      [aria-pressed="true"] svg:nth-of-type(2),
      [aria-pressed="true"] span:nth-of-type(2) {
        display: none;
      }
      @-webkit-keyframes roll-bottom {
        to {
          transform: translate3d(-65%, 0, 0);
        }
      }
      @keyframes roll-bottom {
        to {
          transform: translate3d(-65%, 0, 0);
        }
      }
      @-webkit-keyframes flash {
        50% {
          --alpha: 1;
        }
      }
      @keyframes flash {
        50% {
          --alpha: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="scene">
      <div class="road">
        <div class="cuboid scene__road">
          <div class="cuboid__side">
            <div class="road__markings road__markings--top"></div>
          </div>
          <div class="cuboid__side">
            <div class="road__markings road__markings--back"></div>
          </div>
          <div class="cuboid__side">
            <div class="road__markings road__markings--bottom"></div>
          </div>
          <div class="cuboid__side">
            <div class="road__markings road__markings--front"></div>
          </div>
          <div class="cuboid__side"></div>
          <div class="cuboid__side"></div>
        </div>
      </div>
      <div class="car__bob">
        <div class="car">
          <div class="car__body car__body--bottom">
            <div class="cuboid body body--bottom">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
          <div class="car__body car__body--top">
            <div class="cuboid body body--top">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
          <div class="car__siren">
            <div class="cuboid siren--blue">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
            <div class="cuboid siren--middle">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
            <div class="cuboid siren--red">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
          <div class="car__wheel car__wheel--nsf car__wheel--f">
            <div class="cuboid wheel">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
          <div class="car__wheel car__wheel--nsr car__wheel--r">
            <div class="cuboid wheel">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
          <div class="car__wheel car__wheel--osf car__wheel--f">
            <div class="cuboid wheel">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
          <div class="car__wheel car__wheel--osr car__wheel--r">
            <div class="cuboid wheel">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
          <div class="car__mirrors">
            <div class="car__mirror car__mirror--left">
              <div class="cuboid mirror">
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
              </div>
            </div>
            <div class="car__mirror car__mirror--right">
              <div class="cuboid mirror">
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
              </div>
            </div>
          </div>
          <div class="car__bumper car__bumper--front">
            <div class="cuboid bumper">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
          <div class="car__bumper car__bumper--rear">
            <div class="cuboid bumper">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
          <div class="car__shadow"></div>
          <div class="car__headlights"></div>
        </div>
      </div>
    </div>
    <div class="controls">
      <button class="theme-toggle" title="Toggle theme">
        <span>Turn Lights Off</span><span>Turn Lights On</span
        ><svg viewBox="0 0 512 512" width="100" title="moon">
          <path
            d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"
          ></path></svg
        ><svg viewBox="0 0 512 512" width="100" title="sun">
          <path
            d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"
          ></path>
        </svg>
      </button>
    </div>
    <script type="module">
      import gsap from "https://cdn.skypack.dev/gsap@3.11.0";
      const BOUNDS = 50;
      document.addEventListener("pointermove", ({ x, y }) => {
        const newX = gsap.utils.mapRange(
          0,
          window.innerWidth,
          -BOUNDS * 1.5,
          BOUNDS * 1.5,
          x
        );
        const newY = gsap.utils.mapRange(
          0,
          window.innerHeight,
          BOUNDS * 0.5,
          -BOUNDS * 0.5,
          y
        );
        gsap.set(document.documentElement, {
          "--rotate-x": newY,
          "--rotate-y": newX,
        });
      });
      document.addEventListener("pointerdown", () => {
        gsap.set(document.documentElement, {
          "--speed": "0.1s",
          "--bob-speed": 0,
          "--shift-speed": "1.5s",
          "--siren": "0.5s",
        });
      });
      document.addEventListener("pointerup", () => {
        gsap.set(document.documentElement, {
          "--speed": "0.4s",
          "--bob-speed": "2s",
          "--shift-speed": "5s",
          "--siren": "0s",
        });
      });
      const THEMES = (window.THEMES = {
        LIGHT: "LIGHT",
        DARK: "DARK",
        KEY: "THEME",
      });
      window.LIGHT_QUERY = window.matchMedia("(prefers-color-scheme: light)");
      window.__setTheme = (theme) => {
        window.__THEME = theme;
        window.localStorage.setItem(THEMES.KEY, theme);
      };
      const stored = localStorage.getItem(THEMES.KEY);
      if (stored) {
        window.__THEME = stored;
        window.__setTheme(stored);
      } else {
        if (window.LIGHT_QUERY.matches) {
          window.__THEME = THEMES.LIGHT;
        } else {
          window.__THEME = THEMES.DARK;
        }
        window.__setTheme(window.__THEME);
      }
      window.INITIAL_THEME =
        (window.__THEME && window.__THEME === THEMES.LIGHT) ||
        (window.localStorage.getItem(THEMES.KEY) &&
          window.localStorage.getItem(THEMES.KEY) === THEMES.LIGHT);
      const THEME_TOGGLE = document.querySelector(".theme-toggle");
      gsap.set(THEME_TOGGLE, {
        attr: {
          "aria-pressed": window.__THEME === THEMES.DARK ? "false" : "true",
        },
      });
      gsap.set("html", { "--on": window.__THEME === THEMES.DARK ? 0 : 1 });
      THEME_TOGGLE.addEventListener("click", () => {
        const NEW_THEME =
          window.__THEME === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK;
        window.__setTheme(NEW_THEME);
        gsap.set(THEME_TOGGLE, {
          attr: {
            "aria-pressed": NEW_THEME === THEMES.DARK ? "false" : "true",
          },
        });
        gsap.set("html", { "--on": window.__THEME === THEMES.DARK ? 0 : 1 });
      });
      const AUDIO_TOGGLE = document.querySelector(".audio-toggle");
      window.AUDIO_MUTED =
        (window.localStorage.getItem("3d-squad-audio") &&
          window.localStorage.getItem("3d-squad-audio") === "true") ||
        false;
    </script>
  </body>
</html>
